<template>
	<view v-if="!appAuditState">
		<view class="tab-title">
			<u-tabs :list="list" :is-scroll="false" bar-width="300" bar-height="4" active-color="#00BBAA" inactive-color="#555" :current="current" @change="change"></u-tabs>
		</view>
	<!-- 	<view class="title">
			<input v-model="title" type="text" placeholder="请输入标题" maxlength="100"/>
		</view>
		<!-- 图文 --> 
		<template v-if="current == 0">
			<view class="text">
				<textarea v-model="content" placeholder="输入您此刻的想法" maxlength="2000"/>
			</view>
			<view class="upload">
				<u-upload ref="uploads" width="195" @on-list-change="changeed" :action="action" name="image" :header="{Authorization:token}" max-count="9"></u-upload>
			</view>
		</template>

		<!-- 语音 -->
		<template v-if="current == 1">
			<view class="mp3 safe-area-inset-bottom">
				<view class="u-flex mp3-play">
					<view class="u-flex mp3-play-box" v-if="voicePath" @click="playVoice">
						<v-loading2 :play="playing"></v-loading2>
						<view class="t">{{(duration/1000).toFixed(0)}}s</view>
					</view>
				</view>
				<view class="img u-flex" @longtap="startRecord" @touchend="endRecord" hover-class="longtap-img">
					<image src="/static/icon2/speak.png"></image>
				</view>
				<view class="tip">长按说话</view>
			</view>
		</template>
		
		<!-- 底部安全区适配 -->
		<view class="safe-area-inset-bottom" style="height: 100rpx;box-sizing: content-box;"></view>
		<!-- 购买 -->
		<view class="push-comment u-flex safe-area-inset-bottom">
			<view class="push-btn" @click="submit">
				发布
			</view>
			<view class="u-m-l-30">
				<u-checkbox 
					v-model="anonymity"
					shape="circle"
					active-color="#DF7B5A"
				>匿名</u-checkbox>
			</view>
		</view>
	</view>
</template>

<script>
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	
	export default {
		data() {
			return {
				list: [{name: '图文发布'}, {name: '语音发布'}],
				current: 0,
				voicePath: '',//录音本地路径
				data:'',//页面传参
				content:'',
				title:'',
				image:[],
				playing:!1,//正在播放
				action:'',
				duration:0,
				anonymity:false
			}
		},
		methods: {
			change(index) {
				this.current = index;
			},
			startRecord() {
					console.log('开始录音');
					recorderManager.start({
						format:'mp3'
					});
			},
			endRecord() {
					console.log('录音结束');
					recorderManager.stop();
			},
			playVoice() {
					if(this.playing){
						innerAudioContext.stop()
						this.playing = !1
					}else{
						if (this.voicePath) {
							innerAudioContext.src = this.voicePath;
							innerAudioContext.play();
							this.playing = !0
							innerAudioContext.onEnded(()=>{
								this.playing = !1
								innerAudioContext.offEnded()
							})
						}
					}
			},
			submit(){
				// 发布
				// if(!this.title){
				// 	this.$u.toast('标题不能为空')
				// 	return
				// }
				if(this.current == 1){
					// 语音发布
					if(!this.voicePath){
						this.$u.toast('请先录音')
						return
					}
					if(this.duration < 3000){
						this.$u.toast('录音时间太短了~')
						return
					}
					uni.showModal({
						content:'是否发布？',
						success: (res) => {
							res.confirm && this.$app.uploadVideo(this.$u.api.uploadVideoUrl,{
								filePath:this.voicePath,
								header:{
									Authorization:this.token
								}
							}).then(res=>{
								console.log(res)
								return this.$u.api.commentPush({
									audio:res,
									type:this.current + 1,// 图文1 音频2
									// title:this.title,
									content:Math.floor(this.duration / 1000),
									...this.data,
									anonymity:this.anonymity ? 1 : 0
								})
							}).then(res=>{
									this.$u.toast('发布成功')
									this.$app.jump('/pages/topics/list',!0)
							})
						}
					})
				}else if(this.current == 0){
					if(!this.content){
						this.$u.toast('内容不能为空')
						return
					}
					uni.showModal({
						content:'是否发布？',
						success: (res) => {
							res.confirm && this.$u.api.commentPush({
								title:this.title,
								content:this.content,
								type:this.current + 1,// 图文1 音频2
								image:this.image.toString(),
								...this.data,
								anonymity:this.anonymity ? 1 : 0
							}).then(res=>{
								this.$u.toast('发布成功')
								this.$app.jump('/pages/topics/list',!0)
							})
						}
					})
				}
			},
			changeed(lists,name){
				if(lists.every(item=>item.response)){
					this.image = lists.map(i=>i.response.data[0])
				}
			}
		},
		onLoad(o) {
			let self = this;
			recorderManager.onStop(function (res) {
					console.log('recorder stop' + JSON.stringify(res));
					self.voicePath = res.tempFilePath;
					self.duration = res.duration;
			});
			this.data = JSON.parse(decodeURIComponent(o.data))
			this.action = this.$app.baseUrl + this.$u.api.uploadImageUrl
		}
	}
</script>

<style lang="scss">
	.text{padding: 30rpx 50rpx 50rpx;border-bottom: 10rpx solid #F2F2F2;
		textarea{height: 320rpx;display: block;width: 100%;padding: 24rpx;box-sizing: border-box;box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.1);border-radius: 20rpx;}
	}
	.title{padding: 30rpx 50rpx 0rpx;
		input{display: block;width: 100%;padding: 0 24rpx;box-sizing: border-box;box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.1);border-radius: 20rpx;height: 70rpx;line-height: 70rpx;}
	}
	.upload{justify-content: center;padding: 50rpx 50rpx 0;}
	.mp3{
		width:240rpx;box-sizing: content-box;position: fixed;bottom: 160rpx;left: 50%;transform: translateX(-50%);
		.img{width: 240rpx;height: 240rpx;justify-content: center;background: linear-gradient(180deg, #67EEE4 0%, #00D6C2 100%);;border-radius: 50%;}
		image{display: block;width: 94rpx;height: 135rpx;}
		.tip{text-align: center;font-weight: bold;height: 60rpx;margin-top: 30rpx;}
		.mp3-play{
			height: 100rpx;align-items: flex-start;justify-content: center;
			.mp3-play-box{height: 60rpx;background: linear-gradient(180deg, #67EEE4 0%, #00D6C2 100%);border-radius: 100rpx;width: 240rpx;
				justify-content: space-around;
				.t{font-weight: bold;color: #fff;}
			}
		}
	}
	
	
	
	.push-comment{
		justify-content: center;
		position: fixed;height: 120rpx;box-sizing: content-box;z-index: 9;background-color: #fff;bottom: 0;left: 0;width: 100%;
		.push-btn{background: linear-gradient(180deg, #67EEE4 0%, #00D6C2 100%);width: 500rpx;height: 72rpx;line-height: 72rpx;border-radius: 100rpx;color: #fff;text-align: center;
			font-size: 30rpx;font-weight: bold;
		}
		/deep/ .u-checkbox__label{margin-right: 0!important;}
	}
	.longtap-img{opacity: .8;}
</style>
